<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
  <section class="warp">
    <header class="header">黑马面面</header>
    <!-- 导航栏 -->
    <nav class="nav">
      <a href=""><img src="./icons/icon1.png" alt="" srcset=""><span>hr面试</span></a>
      <a href=""><img src="./icons/icon2.png" alt="" srcset=""><span>笔试</span></a>
      <a href=""><img src="./icons/icon3.png" alt="" srcset=""><span>技术面试</span></a>
      <a href=""><img src="./icons/icon4.png" alt="" srcset=""><span>模拟面试</span></a>
      <a href=""><img src="./icons/icon5.png" alt="" srcset=""><span>面试技巧</span></a>
      <a href=""><img src="./icons/icon6.png" alt="" srcset=""><span>薪资查询</span></a>
    </nav>

    <!-- go模块 -->
    <section class="go">
      <img src="./images/go.png" alt="" srcset="">
    </section>
  </section>
  <section class="content">
    <div class="con-hd">
      <h4> <img src="./icons/i2.png" alt="" srcset=""> <span>就业指导</span></h4>
      <a href="" class="more">更多>></a>
    </div>

    <!-- swiper -->
    <div class="get-job-focus">
      <!-- Swiper -->
      <div class="swiper-container get-job-fo">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><a href=""><img src="./images/pic.png" alt=""></a>
            <p>老师教你面试的技巧</p>
          </div>
          <div class="swiper-slide"><a href=""><img src="./images/pic1.png" alt=""></a>
            <p>老师教你面试的技巧</p>
          </div>
          <div class="swiper-slide"><a href=""><img src="./images/pic2.png" alt=""></a>
            <p>老师教你面试的技巧</p>
          </div>

        </div>

      </div>
      <!-- Add Pagination -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

  </section>



<!-- 充电学习 -->
  <section class="content">
    <div class="con-hd">
      <h4> <img src="./icons/i1.png" alt="" srcset=""> <span>充电学习</span></h4>
      <a href="" class="more">更多>></a>
    </div>

    <!-- swiper -->
   <div class="study">
       <!-- Swiper -->
  <div class="swiper-container study_get-job-fo">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/pic1.png" alt=""><h5>说地道英语，告别中式英语</h5><p> <span>156</span> 人学习</p></div>
      <div class="swiper-slide"><img src="./images/pic2.png" alt=""><h5>说地道英语，告别中式英语</h5><p> <span>156</span> 人学习</p></div>
      <div class="swiper-slide"><img src="./images/pic2.png" alt=""><h5>说地道英语，告别中式英语</h5><p> <span>156</span> 人学习</p></div>

    </div>
    <!-- Add Pagination -->
    <!-- <div class="swiper-pagination"></div> -->
  </div>
   </div>

  </section>

  <footer class="footer">
    <a href="#"><img src="./icons/home.png" alt="" srcset=""><p>首页</p></a>
    <a href="#"><img src="./icons/ms.png" alt="" srcset=""><p>模拟面试</p></a>
    <a href="#"><img src="./icons/net.png" alt="" srcset=""><p>技术</p></a>
    <a href="#"><img src="./icons/user.png" alt="" srcset=""><p>我的首页</p></a>


  </footer>

</body>
<script src="./js/flexible.js"></script>
<script src="./js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
  (function () {
    var swiper = new Swiper('.get-job-fo', {
      slidesPerView: 2,
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,

      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      }
      // nextButton: '.swiper-button-next',
      //       prevButton: '.swiper-button-prev',
    });
  })();

//二
  (function () {
    var swiper = new Swiper('.study_get-job-fo', {
      slidesPerView: 2.5,
      spaceBetween: 15,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  })();
</script>

</html>